<template>
	<div class="Echart_pie">
		<div class="bg">
			<pre class="title">{{centerTitle}}</pre>
		</div>
		<div class="tb" ref="chartPieA" :style="{width: '100%', height: height}"></div>
	</div>
</template>

<script>
import * as echarts from "echarts";
export default {
	name: "Echart_pie",
	props: {
		centerTitle: {
			type: String,
			default: '注册年限\n注册'
		},
		height: {
			type: String,
			default: '350px'
		},
		unit:{
			type:String, default:'件'
		},
		id: {
			type: String,
			default: 'ec'
		},
		fontSize: {
			type: Number,
			default: 14,
		},
		data: {
			type: Array,
			default: function () {
				return [{
						value: 120,
						name: "签约入园环节",
						rank: '12/32'
					},
					{
						value: 353,
						name: "项目上会环节",
						rank: '12/32'
					},
					{
						value: 235,
						name: "项目准入环节",
						rank: '12/32'
					},
					{
						value: 286,
						name: "项目洽谈环节",
						rank: '12/32'
					},
					{
						value: 286,
						name: "项目可行性研究",
						rank: '12/32'
					},
				]
			}
		}

	},
	data() {
		return {
			myChart: {}
		};
	},
	mounted() {
		let _this = this;
		_this.$nextTick(() => {
			_this.init()
			_this.myChart.resize()
		})
		window.addEventListener('resize', () => {
			_this.myChart.resize()
		})
	},
	watch: {
		data: {
			handler() {
				let _this = this;
				this.$nextTick(() => {
					this.init()
					_this.myChart.resize();
				})
			},
			deep: true


		}
	},
	methods: {
		init() {
			this.myChart = echarts.init(this.$refs.chartPieA);
			// let colorList = ["#2BA4FD", "#36CF82", "#F8912A", "#FD5439", "#9891FF", "#ff9f7f", "#fb7293", "#e7bcf3"];
			let colorList = ["#2BA4FD", "#36CF82", "#F8912A", "#FD5439", "#9891FF", "#ff9f7f", "#fb7293", "#e7bcf3","#2BA4FD", "#36CF82", "#F8912A", "#FD5439", "#9891FF", "#ff9f7f", "#fb7293", "#e7bcf3","#2BA4FD", "#36CF82", "#F8912A", "#FD5439", "#9891FF", "#ff9f7f", "#fb7293", "#e7bcf3","#2BA4FD", "#36CF82", "#F8912A", "#FD5439", "#9891FF", "#ff9f7f", "#fb7293", "#e7bcf3","#2BA4FD", "#36CF82", "#F8912A", "#FD5439", "#9891FF", "#ff9f7f", "#fb7293", "#e7bcf3","#2BA4FD", "#36CF82", "#F8912A", "#FD5439", "#9891FF", "#ff9f7f", "#fb7293", "#e7bcf3","#2BA4FD", "#36CF82", "#F8912A", "#FD5439", "#9891FF", "#ff9f7f", "#fb7293", "#e7bcf3","#2BA4FD", "#36CF82", "#F8912A", "#FD5439", "#9891FF", "#ff9f7f", "#fb7293", "#e7bcf3","#2BA4FD", "#36CF82", "#F8912A", "#FD5439", "#9891FF", "#ff9f7f", "#fb7293", "#e7bcf3",];
			let colorLineList = [];
			for(let i = 0; i < colorList.length+1; i++) {
				colorLineList.push({
					type: 'linear',
					x: 0,
					y: 0,
					x2: 1,
					y2: 1,
					colorStops: [{
						offset: 0.5,
						color: colorList[i] // 0% 处的颜色
					}, {
						offset: 1,
						color: 'rgba(255,255,255,1)' // 100% 处的颜色
					}],
					global: false // 缺省为 false
				})
			}
			let option = {
				grid: {
					left: 0,
					right: "0%",
				},
				tooltip: {
					confine: true,
					trigger: 'item',
					formatter: '{b}\n{c}'+this.unit
				},
				series: [
					// 主要展示层的
					{
						radius: ["42%", "65%"],
						center: ["50%", "50%"],
						type: "pie",
						// roseType: 'radius',
						itemStyle: {
							normal: {
								color: function (params) {
									return colorLineList[params.dataIndex];
								},
								shadowBlur:40,
								shadowColor:'rgba(44,164,254,0.24)'
							},
						},

						labelLine: {
							normal: {
								show: true,
							},
						},
						label: {
							normal: {
								show: true,
								formatter: '{b}\n{d}%',
								textStyle: {
									fontSize: 12,
									lineHeight: 16
								}
							},
						},
						data: this.data,
					},
					// 主要展示层的
					// {
					// 	radius: ["50%", "60%"],
					// 	center: ["50%", "50%"],
					// 	type: "pie",
					// 	itemStyle: {
					// 		normal: {
					// 			color: 'rgba(255,255,255,0.2)'
					// 		},
					// 	},
					// 	tooltip: {
					// 		show: false
					// 	},
					// 	labelLine: {
					// 		normal: {
					// 			show: false,
					// 		},
					// 	},
					// 	label: {
					// 		normal: {
					// 			show: false,

					// 		},
					// 	},
					// 	data: [1],
					// },
				],
			};
			this.myChart.setOption(option);
		}
	},

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.bg {
	position: absolute;
	top: 0px;
	left: 0px;
	text-align: center;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	.title {
		color: #2F3757;
		font-size: 20px;
		padding: 0 40%;
		width: 100%;
		line-height: 28px;
		font-family: '微软雅黑';
		overflow: hidden;
		margin-bottom: 0px;
	}
}

.Echart_pie {
	position: relative;
}
</style>